<template>
  <Layout class="home" v-loading="loading" :footer="false"> 
    <div class="banner_container" >
      <swiper class="banner" ref="swiperBanner" :style="swiperH" :options="swiperBanner"
        v-if="banner && banner.length"  @slideChangeTransitionEnd="slideChangeTransitionEnd"
       @slideChangeTransitionStart="slideChangeTransitionStart"> 
        <swiper-slide v-for="item in banner" :key="item.img"  >
          <bannerItem :dataItem="item" />
        </swiper-slide>
      </swiper>
     
 
      <div class="slide_tips" v-show="tipsShow"> 
        <i class="s_line"></i>
        <span class="txt">滑动</span>
      </div>
    </div>
     <div class="footer_div_block" style="'opacity:0'" v-show="swiperEnd">
        <FooterItem></FooterItem>
      </div>
      <div class="footer_div" :style="'opacity:'+opacity" v-show="swiperEnd">
        <FooterItem></FooterItem>
      </div>
  </Layout>
</template>

<script>
import Layout from '../layout/index.vue'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import bannerItem from './bannerItem.vue'
import FooterItem from '../layout/components/FooterBar.vue'
import { bannerList } from  '@/api/index/index'
import { mapGetters } from 'vuex'
export default {
  data(){
    return{
      swiperBanner: {
        autoplay: false,
        loop: false,//是否循环
        slidesPerView: 1,//一排显示几个
        spaceBetween: 0, //间隔'
        direction: 'vertical',
        speed: 1000,
        mousewheel: {
          releaseOnEdges: true,
          eventsTarged: '.banner_container',
        },
      },  
      loading:false,
      swiperH: 'height: 100vh;',
      swiperEnd: false, 
      topH: '',
      opacity: 0.2,
      tipsShow: true
    }
  },
  components: { Swiper, SwiperSlide, bannerItem, FooterItem , Layout},
  mounted(){
    this.swiperH ='height:' + (document.documentElement.clientHeight  || document.body.clientHeight )+ 'px'
    window.addEventListener("scroll", this.debounce(this.windowScroll,100) )
  },
  created () {
    // vm = this
    if(this.curSite){
      this.getBannerList()

    }
  },
  destroyed(){
    window.removeEventListener("scroll", this.debounce(this.windowScroll,100) )
  },
  computed: {
    swiper() {
      return this.$refs.swiperBanner.$swiper
    },
    ...mapGetters(['curSite', 'siteIcon', 'logoClick', 'isPhone']),
  },
  methods: {
    windowScroll(){
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      let footer = document.getElementsByClassName("footer_div_block")[0].clientHeight
      if(this.topH > scrollTop ){ // 向上
        if(scrollTop == 0) {
          this.swiper.mousewheel.enable()
          this.tipsShow = true
        } 
         this.opacity = 0.2
      } else if( this.topH < scrollTop) { //向下滑
        this.swiperEnd = true
        if(scrollTop == footer){
          this.swiper.mousewheel.disable()
        } 
        this.opacity = 1
      }
       document.getElementsByClassName("footer_div")[0].style.opacity =  this.opacity
      this.topH = scrollTop
      
    },
    debounce(fn, delay) {
      let time = false //第一次进来time为false，走else
      return function(){
        if (time) {
          clearTimeout(time) //滚动条在不断的滚动，我们不断的清除定时器（重新初始化定时器，在重新设置定时器）
          time = setTimeout(fn, delay) //又重新设置定时器，
        } else {
          time = setTimeout(fn, delay) //进来第一次先进入这里，然后time被赋值 != false,如果滚动条在继续滚动，接着马上进入time == true中
        }
      }
    },
    slideChangeTransitionStart(){
      if(this.swiper.activeIndex == 1 ){
         document.getElementsByClassName("bonoch_menu_pc ")[0].style = 'opacity:0'
      }
    },
     slideChangeTransitionEnd(){
      let activeIndex = this.swiper.activeIndex
      if( activeIndex == 0 && activeIndex < this.activeIndex ){
        document.getElementsByClassName("bonoch_menu_pc ")[0].style = 'opacity:1'
      }
      this.activeIndex = activeIndex
      this.swiperEnd = this.swiper.isEnd      
      if( this.swiperEnd){
        this.swiper.mousewheel.disable()
        this.tipsShow = false
      }
     },
    getBannerList () { // banner
      this.loading= true
      let params = {
        site_id: this.curSite.id
      }
      bannerList(params).then(res=>{
        if(res.state == 1){
          let list = res.data.rows
          this.banner = list
        }
        this.loading = false
      })
    },
  }
}
</script>

<style lang="scss">
@import  '@/styles/index/index.scss';
</style>